<template>
  <div class="grid-wrap">
    <div
      v-for="(item, index) in gridList"
      :key="index"
      class="grid-item flex-center"
      v-bind="item.attrs"
      @click="onClick(item, index)"
    >
      <div v-html="item.html"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs } from "vue";
import type { CSSProperties, PropType } from "vue";

export default defineComponent({
  props: {
    gridList: {
      type: Array as PropType<gridType[]>,
      default: () => []
    }
  },
  setup(props, { attrs, slots, emit, expose }) {
    const onClick = (item: gridType, index: number) => emit("gridClick", item, index);

    return {
      ...toRefs(props),
      onClick
    };
  }
});
</script>

<style lang="scss" scoped>
.grid-wrap {
  width: 100%;
  height: 100%;
  margin: 10px auto;
  overflow: auto;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 24%);
  grid-template-rows: repeat(3, 24%);
  justify-content: center;
  align-items: center;

  .grid-item {
    min-width: 100px;
    min-height: 100px;

    background: #f0eeee;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #e7e5e5;
    }
  }

  .grid-span-1 {
    grid-column-start: span 1;
  }

  .grid-span-2 {
    grid-column-start: span 2;
  }

  .grid-span-3 {
    grid-column-start: span 3;
  }

  .grid-span-4 {
    grid-column-start: span 4;
  }
}
</style>
